<template>
  <div class="test">
    <div class="mianji">{{number || '0'}}</div>
    <div class="but" @click="clear">AC</div>
    <div class="but" @click="qufan">+/-</div>
    <div class="but" @click="banfen">%</div>
    <div class="but1" @click="chu">÷</div>
    <div class="but" @click="addnumber('7')">7</div>
    <div class="but" @click="addnumber('8')">8</div>
    <div class="but" @click="addnumber('9')">9</div>
    <div class="but1" @click="cheng">×</div>
    <div class="but" @click="addnumber('4')">4</div>
    <div class="but" @click="addnumber('5')">5</div>
    <div class="but" @click="addnumber('6')">6</div>
    <div class="but1" @click="jian">-</div>
    <div class="but" @click="addnumber('1')">1</div>
    <div class="but" @click="addnumber('2')">2</div>
    <div class="but" @click="addnumber('3')">3</div>
    <div class="but1" @click="jia">+</div>
    <div class="but zero" @click="addnumber('0')">0</div>
    <div class="but" @click="dian">.</div>
    <div class="but1" @click="deng">=</div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    data() {
      return {
        number: '',
        number1:null,
        number2:null,
        n2Clicked:false
      }
    },
    methods: {
      clear() {
        this.number = '';
      },
      qufan() {
        this.number = this.number.charAt(0) === '-' ? this.number.slice(1) : `-${
            this.number}`;
        //this.number.slice(1)，
        // 判断第一个元素是否为负号，如果是，就取第二个元素到最后一个元素，如果不是，前面再填上一个负号
      },
      banfen() {
        this.number = `${parseFloat(this.number) / 100}`
        //parseFloat(this.number)是将字符串类型的数据转换成float类型
      },
      addnumber(number) {
        if(this.n2Clicked){
          this.number = '';
          this.n2Clicked=false;
        }
        this.number = `${this.number}${number}`
        //将点击的number传递给显示的namber
      },
      dian() {
        //indexOf('.'),寻找数组中是否含有小数点，若没有会返还-1，
        if (this.number.indexOf('.') === -1) {
          this.addnumber('.')
        }
      },
      setNum(){
        this.number1 = this.number;
        this.n2Clicked=true
      },
      chu() {
        this.number2 = (a,b) => b/a;
        this.setNum()
      },
      cheng() {
        this.number2 = (a,b) => b*a;
        this.setNum()
      },
      jian(){
        this.number2 = (a,b) => b-a;
        this.setNum()
      },
      jia(){
        this.number2 = (a,b) => b+a;
        this.setNum()
      },
      deng(){
        this.number = `${this.number2(
            parseFloat(this.number),
            parseFloat(this.number1)
        )}`
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .test {
    margin: 0 auto;
    width: 400px;
    font-size: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(50px, auto);
  }

  .mianji {
    grid-column: 1/5;
    background-color: black;
    color: white;
  }

  .zero {
    grid-column: 1/3;
  }

  .but {
    background-color: azure;
    border: 1px solid #333;
  }

  .but1 {
    background-color: orange;
    border: 1px solid #333;
  }
</style>
